<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网易云音乐商城</title>
    <link rel="stylesheet" href="./css/wy.css" />
    <link rel="stylesheet" href="./tools/swiper-bundle.min.css">
    <script src="./tools/axios.min.js"></script>
    
  </head>
  <body>
    <!--导航栏  -->
    <div id="content f-pr" class="m-header">
      <div class="nav f-pr">
        <div class="logo f-f1">
          <a href="./index.html"></a>
        </div>
        <div class="search f-f1">
          <div class="inputwrap">
            <form class="f-pr">
              <input type="text" class="searchbox" placeholder="搜一搜" />
            </form>
          </div>
          <div class="wrap">
            <div class="m-hot-search-words">
              <h2>热门搜索</h2>
              <ul class="list">
                <li>薛之谦</li>
                <li>耳机</li>
                <li>迪斯尼Q2</li>
                <li>漫威太空仓</li>
                <li>真无线</li>
              </ul>
            </div>
            <div class="m-search-history">
              <h2>搜索历史</h2>
              <ul class="list">
                <li class="f-pr">
                  <p class="cnt f-thide">迪士尼Q2</p>
                  <span class="btn f-pa">
                    <i>x</i>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="m-shopcar f-f1 f-pr">
          <a href="./html/shopCar.html" data-action="login"></a>
        </div>
        <div class="m-user f-f1" id="m-user">
          <div class="m-select f-pr">
            <div class="login">登录</div>
            <ul class="login2">
              <li data-action="login">
                <script></script>
                <a class="f-pr s-fc0" href="./html/login.html">
                  <!-- <em>需要强调的文本</em>” -->
                  <em class="phone"></em>
                  手机号登录
                  <span class="f-pa"></span>
                </a>
              </li>
              <li data-action="login">
                <a class="f-pr s-fc0">
                  <!-- <em>需要强调的文本</em>” -->
                  <em class="wechat"></em>
                  微信登录
                  <span class="f-pa"></span>
                </a>
              </li>
              <li data-action="login">
                <a class="f-pr s-fc0">
                  <!-- <em>需要强调的文本</em>” -->
                  <em class="qq"></em>
                  QQ登录
                  <span class="f-pa"></span>
                </a>
              </li>
              <li data-action="login">
                <a class="f-pr s-fc0">
                  <!-- <em>需要强调的文本</em>” -->
                  <em class="sina"></em>
                  新浪微博登录
                  <span class="f-pa"></span>
                </a>
              </li>
              <li data-action="login">
                <a class="f-pr s-fc0">
                  <!-- <em>需要强调的文本</em>” -->
                  <em class="netease"></em>
                  网易邮箱账号登录
                  <span class="f-pa"></span>
                </a>
              </li>
            </ul>
            <i class="arr"></i>
          </div>
        </div>
      </div>
      <div class="border f-pa"></div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          style="margin: 0px; background: #0e0e0e; height: 100%"
        >
          <img
           class="imgBove"
            style="
              display: block;
              -webkit-user-select: none;
              margin: auto;
              cursor: zoom-in;
              background-color: hsl(0, 0%, 90%);
              transition: translate3d(-1258px, 0px, 0px) background-color 300ms;
            "
            src="http://p4.music.126.net/iSxBXbGgCoNBED-4QowsWg==/109951167445252991.jpg"
            alt=""
          />
        </div>
        <div
          class="swiper-slide"
          style="margin: 0px; background: #ff453b; height: 100%"
        >
          <img
            class="imgBove"
            style="
              display: block;

              margin: auto;
              cursor: zoom-in;
              background-color: hsl(0, 0%, 90%);
              transition: translate3d(-1258px, 0px, 0px) background-color 300ms;
            "
            src="http://p4.music.126.net/4gt2KdJe2xVnKLr3TC75jQ==/109951167433742636.jpg"
            alt=""
          />
        </div>
        <div
          class="swiper-slide"
          style="margin: 0px; background: #f6aaea; height: 100%"
        >
          <img
            class="imgBove"
            style="
              display: block;
              -webkit-user-select: none;
              margin: auto;
              cursor: zoom-in;
              background-color: hsl(0, 0%, 90%);
              transition: translate3d(-1258px, 0px, 0px) background-color 300ms;
            "
            src="http://p3.music.126.net/cYEXrNnYCZUQjHgkkeCNHw==/109951167431300762.jpg"
            alt=""
          />
        </div>
        <div
          class="swiper-slide"
          style="margin: 0px; background: #1a1a1a; height: 100%"
        >
          <img
            class="imgBove"
            style="
              display: block;
              -webkit-user-select: none;
              margin: auto;
              cursor: zoom-in;
              background-color: hsl(0, 0%, 90%);
              transition: translate3d(-1258px, 0px, 0px) background-color 300ms;
            "
            src="http://p4.music.126.net/yN8h8GHluzN_BVX6SGYFrQ==/109951167427675060.jpg"
            alt=""
          />
        </div>
        <div
          class="swiper-slide"
          style="margin: 0px; background: #000000; height: 100%"
        >
          <img
            class="imgBove"
            style="
              display: block;
              -webkit-user-select: none;
              margin: auto;
              cursor: zoom-in;
              background-color: hsl(0, 0%, 90%);
              transition: translate3d(-1258px, 0px, 0px) background-color 300ms;
            "
            src="http://p3.music.126.net/83gg_sB4E54ICXPIASyytw==/109951167431328832.jpg"
            alt=""
          />
        </div>
        <div
          class="swiper-slide"
          style="margin: 0px; background: #daffc5; height: 100%"
        >
          <img
            class="imgBove"
            style="
              display: block;
              -webkit-user-select: none;
              margin: auto;
              cursor: zoom-in;
              background-color: hsl(0, 0%, 90%);
              transition: translate3d(-1258px, 0px, 0px) background-color 300ms;
            "
            src="http://p4.music.126.net/iAPwgXSQyaduINYhSP0q5Q==/109951167427682608.jpg"
            alt=""
          />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <script src="./tools/swiper-bundle.min.js"></script>
    <script>
      var mySwiper = new Swiper(".swiper", {
        //   direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        // 如果需要滚动条
        //   scrollbar: {
        //     el: '.swiper-scrollbar',
        //   },
      });

      //鼠标滑过pagination控制swiper切换
      for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
        mySwiper.pagination.bullets[i].onmouseover = function () {
          this.click();
        };
      }
      //改变背景图颜色
      // var bgColor = document.getElementsByClassName("swiper");
      // var bgColor2 = document.getElementsByClassName("swiper-slide");
      // var color = [
      //   "#ffffff",
      //   "#daffc5",
      //   "#ffffff",
      //   "#1a1a1a",
      //   "#ff453b",
      //   "#1a1a1a",
      //   "#daffc5",
      //   "#f6aaea",
      // ];
      // console.log(bgColor);
      // console.log(bgColor2);
      // console.log(color);
      // for (var i = 0; i < bgColor2.length; i++) {
      //   // console.log(i);
      //   for (var j = 0; j < color.length; j++) {
      //     console.log(bgColor2[i]);

      //   //   bgColor2[i].style.backgroundColor = "";
      //     var  changeColor  = color[j] ;
      //     console.log(changeColor);
      //     bgColor2[i].style.backgroundColor = changeColor;
      //   }
      //   console.log(i);
      // }
    </script>
    <!-- 第三 -->
    <div class="g-tab">
      <div class="hometab">
        <ul class="f-tc f-cb">
          <li class="tab">
            <a
              data-action="gotopic"
              data-href="/store/product/column?id=55001&amp;title=热销爆品"
              data-page="topic"
              data-title="热销爆品"
              class="f-blk"
            >
              <img
                src="http://p3.music.126.net/UKhDHWnEMmoOo27PQmDPbA==/19117208672446378.jpg"
              />
              <span class="f-thide">热销爆品</span>
            </a>
            <em class="line"></em>
          </li>
          <li class="tab">
            <a
              data-action="gotopic"
              data-href="/store/product/variouskind;title=IP周边"
              data-page="class"
              data-title="IP周边"
              class="f-blk"
            >
              <img
                src="http://p4.music.126.net/tKMAm5OvR-2lAj7dnEOhsg==/18623527952924939.jpg"
              />
              <span class="f-thide">IP周边</span>
            </a>
            <em class="line"></em>
          </li>
          <li class="tab">
            <a
              data-action="gotopic"
              data-href="/store/product/variouskind;title=数码影音"
              data-page="class"
              data-title="数码影音"
              class="f-blk"
            >
              <img
                src="http://p3.music.126.net/PzH4QQKE5R97J9f2V-SvqQ==/18585045045959929.jpg"
              />
              <span class="f-thide">数码影音</span>
            </a>
            <em class="line"></em>
          </li>
          <li>
            <a href="javascript:;" class="f-blk jifen" data-action="gocredit">
              <div class="left"></div>
              <div class="right">
                <div class="txt s-fc1">云贝商城</div>
                <span class="count">0</span>
                <span class="jifen">云贝</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 第四 -->
    <div class="g-bd g-bd-home">
      <div id="g-main" class="ma">
        <div id="module-root" class="n-index">
          <div class="subjs f-cb">
            <div class="subj pad-right">
              <a
                href=""
                data-position="0"
                target="_blank"
              >
                <img
                  src="http://p4.music.126.net/kQqf40w-NFhLXIksQPgSwg==/109951164207184328.jpg"
                  alt=""
                />
              </a>
            </div>
            <div class="subj">
              <a
                href=""
                data-action="gosub"
                data-position="1"
                target="_blank"
              >
                <img
                  src="http://p4.music.126.net/QtFPuBnRPFatpnGsyNJYhw==/109951163973446450.jpg"
                  alt=""
                />
              </a>
            </div>
          </div>
          <div class="m-block" style="min-height: 816px" id="m-block-hot">
            <span class="mid-txt mid-bold">编辑推荐</span>
            <div id="recmd-list">
              <div class="m-product">
                <ul class="list f-cb"  id="plist">
                  <!--Regular if3-->
                  <!--Regular list-->
                  <li>
                    <div >
                      <h3 class="f-thide2">
                      <a href="#" class="cover">
                      <img class="f-img" src="http://p4.music.126.net/5WwJKSqlCjMaBwfh1G4M9g==/109951166888302170.jpg?param=244y244" alt="">
                      </h3>
                      <div class="cnt f-tc">
                      <span>Supreme X obc联名款SK12潮牌真无线TWS蓝牙耳机半入耳式苹果..</span>
                      </div>
                      <p class="txt f-thide" >￥249</p></a>
                      </div>
                    </li>
                  </div>
                </ul>
<!-- 右边导航栏 -->
              <div style="display: none">
                <div class="m-page">
                  <a href="javascript:;" class="zbtn zprv js-disabled"></a>
                  <!--Regular if6-->
                  <!--Regular list-->
                  <a href="javascript:;" class="zpgi js-selected">1</a>

                  <a href="javascript:;" class="zpgi">0</a>

                  <a href="javascript:;" class="zbtn znxt"></a>
                </div>
              </div>
            </div>
          </div>
          <!-- 专辑 -->
          <div
            id="digalb"
            class="digalb f-mgt10"
            style="background-color: #f9f9f9"
          >
            <div class="cnt">
              <div class="inner">
                <span><i></i>数字专辑</span>
                <p class="f-thide">
                  (G)I-DLE、王嘉尔数字专辑火热售卖中
                  <em class="p-cover"></em>
                </p>
                <a href="javascript:;">立 即 购 买 &gt;</a>
              </div>
            </div>
            <div class="covers f-pa">
              <img
                class="sml"
                src="https://p2.music.126.net/iFeWO9yxsbKkzNdE7xNNiw==/109951166089730540.jpg?param=120y120"
              />
              <img
                class="big"
                src="https://p1.music.126.net/mxLEk_AMm0w5gAMThGd14w==/109951166044914127.jpg?param=120y120"
              />
              <i class="circle"></i>
            </div>
          </div>
            <!-- 第二商品列表 -->
          <div class="m-block" style="min-height: 816px" id="m-block-hot">
            <span class="mid-txt mid-bold">热卖商品</span>
            <div id="recmd-list">
              <div class="m-product">
                <ul class="list f-cb" id="plist2">


                  <li>
                    <div>
                    <h3 class="f-thide2">
                    <a href="../../project/html/item.html?id=752708" target="_blank" class="cover">
                        <img src="" class="f-img" alt="">
                        </a></h3><a href="../../project/html/item.html?id=752708" target="_blank" class="cover">
                        <div class="cnt f-tc">
                        <span></span>
                        </div>
                        <p>￥0.00</p>
                        </a>
                  </div>
              </li>

                  </ul>
                  </div>
                  
                </div>
           
      </div>
                
<!-- 右边导航栏 -->
              <div style="display: none">
                <div class="m-page">
                  <a href="javascript:;" class="zbtn zprv js-disabled"></a>
                  <!--Regular if6-->
                  <!--Regular list-->
                  <a href="javascript:;" class="zpgi js-selected">1</a>

                  <a href="javascript:;" class="zpgi">0</a>

                  <a href="javascript:;" class="zbtn znxt"></a>
                </div>
              </div>
            </div>
          </div>
          <div id="m2top">
            <div
              class="m-wrap"
              id="m-top"
              style="
                position: fixed;
                top: 50%;
                margin-top: -138px;
                bottom: auto;
              "
            >
              <div
                class="m-item m-unclick"
                data-action="go2license"
                style="cursor: pointer"
              >
                <span>查看<br />营业执照</span>
              </div>
              <div class="m-item m-unclick">
                <span>100%<br />正品</span>
              </div>
              <div class="m-item m-unclick">
                <span>七天无理由退货</span>
              </div>
              <a class="m-item shopcar" href="./html/shopCar.html">
                <span>
                  <i class="icon"></i>
                  <span class="f-pr">购物车
                    <span class="num f-pa j-cartnum">0</span>
                  </span>
                </span>
              </a>
              <div class="m-item kefu" data-action="kefu">
                <i class="icon"></i><span class="f-pr">客服</span>
              </div>
              <a href="javascript:scroll(0,0)" class="m-item m-back" > 
                <!-- <div class="m-item m-back" data-action="top"></div> -->
                <!-- <a class="j-totop"  href="#content"></a> -->
              </a>
              
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <div class="g-ft g-store-ft g-ft-noplaybar">
      <div class="m-ft">
        <div class="wrap f-cb">
          <div class="copy">
            <p>
              <a
                href="//st.music.163.com/official-terms/service"
               
                class="s-fc4"
                >服务条款</a
              ><span class="line">|</span>
              <a
                href="//st.music.163.com/official-terms/privacy"
              
                class="s-fc4"
                >隐私政策</a
              ><span class="line">|</span>
              <a
                href="//st.music.163.com/official-terms/children"
                target="_blank"
                class="s-fc4"
                >儿童隐私政策</a
              ><span class="line">|</span>
              <a
                href="//music.163.com/st/staticdeal/complaints.html"
                target="_blank"
                class="s-fc4"
                >版权投诉指引</a
              ><span class="line">|</span>
              <a
                href="https://mp.music.163.com/600948c936c13f4d09752e73/contact-us-web/index.html?source=Music-Mall"
                class="s-fc4"
                >联系我们</a
              >
            </p>
            <p class="s-fc3">
              <span class="sep">网易公司版权所有©1997-2022</span
              >杭州乐读科技有限公司运营：<a
                class="s-fc3"
                href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/8282703158/452a/ca0c/3a10/caad83bc8ffaa850a9dc1613d74824fc.png"
                target="_blank"
                >浙网文[2021] 1186-054号</a
              >
            </p>
            <p class="s-fc3">
              <a
                class="s-fc3"
                href="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/11202823048/cd21/9c11/b6ec/a94ff538fff84c7efd4529ed8f6b0c4e.png"
              
                >食品经营许可证</a
              >
              <a
                class="s-fc3"
                href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/12636982313/1de4/4c7e/43ac/fa093172a14ac87d48fc5447c6895d4b.jpg"
                
                >出版物经营许可证</a
              >
              <a
                class="s-fc3"
                href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/3920675333/e94d/cbaf/a3ad/5c24a5e9d195457ad1c6bb2f1274c807.jpg"
              
                >营业执照</a
              >
              <span class="sep"
                >网络食品交易第三方平台提供者信息备案: 浙网食A33010041</span
              >
              <a
                class="s-fc3"
                href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/5825415123/2c76/c197/f6f7/5f2911c26f2a4a4cc2f89e50e7959d31.jpg"
               
                >进口冷链管理承诺书</a
              >
            </p>
            <p class="s-fc3">
              <span class="sep">粤B2-20090191-18</span>举报邮箱：<a
                class="s-fc3"
                href="https://beian.miit.gov.cn/#/Integrated/index"
                >工业和信息化部备案管理系统网站</a
              >
            </p>
          </div>
          <ul class="enter f-fr">
            <li>
              <a
                class="logo logo-musician f-tid"
                href="/recruit"
                target="_blank"
                >独立音乐人</a
              >
            </li>
            <li>
              <a
                class="logo logo-topic f-tid"
                href="/topic/recruit"
                target="_blank"
                >音乐专栏</a
              >
            </li>
            <li>
              <a
                class="logo logo-midea f-tid"
                href="/topic/selfmedia"
                target="_blank"
                >自媒体</a
              >
            </li>
            <li>
              <a
                class="logo logo-reward f-tid"
                href="/web/reward"
                target="_blank"
                >赞赏</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>
